<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="tan">
        <div class="nav">
            <div>菜名</div>
            <div>菜品类别</div>
            <div>库存</div>
            <div>盘点时间</div>
            <div>操作</div>


        </div>
        <div class="list gai">
            <div>菜名</div>
            <div>菜品类别</div>
            <div>库存</div>
            <div>盘点时间</div>
            <div>确定</div>
            <div>取消</div>
        </div>
    </div>
    <div class="sort">
        <select name="" id="sele">
            <option value="全部">全部 </option>
            <option value="苏菜">苏菜 </option>
            <option value="粤菜">粤菜</option>
            <option value="鲁菜"> 鲁菜</option>
            <option value="川菜">川菜 </option>
            <option value="湘菜">湘菜 </option>
            <option value="闽菜"> 闽菜</option>
            <option value="浙菜"> 浙菜</option>
            <option value="徽菜">徽菜 </option>
        </select>
        <input type="text" id="sort"> <span class="fun"> 点击搜索</span>

    </div>
    <div class="nav">
        <div>菜名</div>
        <div>菜品类别</div>
        <div>库存</div>
        <div>盘点时间</div>
        <div>删除</div>
        <div>修改</div>


    </div>
    <div class="box">
        <div class="list">
            <div>菜名</div>
            <div>菜品类别</div>
            <div>库存</div>
            <div>盘点时间</div>
            <div>删除</div>
            <div>修改</div>
        </div>

    </div>
</body>

</html>
<script src="../js/ajax.js"></script>
<script>

    function $(e) { return document.querySelector(e) }
    aj()
    function aj() {
        obj.post({
            url: "/check",
            text: {
            },
            hed: {
            },
            callback(data) {

                let arr = JSON.parse(data)
                console.log(arr);
                let str = ``
                arr.forEach(item => {
                    item.list.forEach(key => {
                        if (key["id"]) {
                            str += `   <div class="list" id=${key["id"]}>
            <div>${key["name"]}</div>
            <div>${key["class"]}</div>
            <div>${key["num"]}</div>
            <div>${key["day"]}</div>
            <div>删除</div>
            <div>修改</div>
            </div>`
                        }
                    })
                });
                $(".box").innerHTML = str

                $(".box").addEventListener("click", e => {

                    console.log(e.target.innerHTML);
                    switch (e.target.innerHTML) {
                        case "删除":
                            obj.post({
                                url: "/remove",
                                text: {
                                    id: e.target.parentNode.id
                                },
                                hed: {
                                },
                                callback(data) {
                                    aj()
                                }
                            })
                                ; break
                        case "修改":
                            let str = e.target.parentNode.id
                            let brr = str.split("-")
                            let [i, j] = brr
                            i *= 1
                            j *= 1
                            // console.log();
                            $(".tan").style.display = "block"
                            let myobj = arr[i]
                            let tetxs = myobj["list"]
                            console.log(tetxs[j]);
                            $(".gai").innerHTML = `     
                            <input type="text" value="${tetxs[j]["name"]}" id="name">
                            <input type="text" value="${tetxs[j]["class"]}"  id="clas">
                            <input type="text" value="${tetxs[j]["num"]}"  id="num">
                            <input type="text" value="${tetxs[j]["day"]}"  id="day">
                                <div>取消</div>
                                <div id = ${tetxs[j]["id"]}>修改</div>`
                            $(".gai").addEventListener("click", e => {
                                if (e.target.innerHTML === "修改") {
                                    $(".tan").style.display = "none"
                                    obj.post({
                                        url: "/amend",

                                        text: {
                                            is: e.target.id,
                                            name: $("#name").value,
                                            cs: $("#clas").value,
                                            num: $("#num").value,
                                            day: $("#day").value,


                                        },
                                        hed: {

                                        },
                                        callback(data) {

                                            aj()
                                        }
                                    })
                                } else if (e.target.innerHTML === "取消") {

                                }
                            })
                                ; break
                    }
                })
                $(".fun").onclick = e => {

                    obj.post({
                        url: "/sort",

                        text: {
                            typehade: $("#sele").value,
                            typeend: $("#sort").value,

                        },
                        hed: {

                        },
                        callback(data) {
                            let arr = JSON.parse(data)
                            $(".box").innerHTML = ``
                            let str = ``
                            arr.forEach(key => {
                                if (key["id"]) {
                                    str += `   <div class="list" id=${key["id"]}>
                                        <div>${key["name"]}</div>
                                        <div>${key["class"]}</div>
                                        <div>${key["num"]}</div>
                                        <div>${key["day"]}</div>
                                        <div>删除</div>
                                        <div>修改</div>
                                        </div>`
                                }
                            });
                            if (arr.length === 0) {
                                str += `<div class="list" >没有找到您想吃的菜！！换个口味试试·····</div>`
                            }
                            $(".box").innerHTML = str


                        }
                    })
                }
            }
        })
    }

</script>